<template>
  <div>
    <template v-for="(type, index) in fileTypes">
      <div v-if="(displayTypes && displayTypes.findIndex((x) => x == type.typeId) != -1) || (type.files && type.files.length > 0) || displayAll" :key="index">
        <van-cell :title="type.name" />
        <div v-if="type.files">
          <div v-for="(file, index) in type.files" :key="index">
            <van-swipe-cell style="margin-bottom: 5px">
              <van-card :title="file.fileName" class="file-card" :thumb="type.display == 'file' ? require('@/assets/file.png') : fileURL + file.srcPath" @click-thumb="imagePreview(type, file)">
                <template #tags>
                  <div v-if="file.fileSize">
                    <span v-if="file.fileSize / 1024 / 1024 > 1">{{ Math.ceil(file.fileSize / 1024 / 1024) }}MB</span>
                    <span v-else>{{ Math.ceil(file.fileSize / 1024) }}KB</span>
                  </div>
                  <div style="margin-top: 3px">{{ file.postTime }}</div>
                  <div class="buttonBox">
                    <van-button
                      v-if="file.htmlPath"
                      style="margin-right: 10px"
                      size="mini"
                      type="primary"
                      @click="
                        () => {
                          htmlPath = fileURL + file.htmlPath
                          previewVis = true
                        }
                      "
                    >
                      预览
                    </van-button>
                    <van-button
                      size="mini"
                      type="info"
                      @click="
                        () => {
                          downloadFile(file)
                        }
                      "
                    >
                      下载
                    </van-button>
                  </div>
                </template>
              </van-card>
              <template #right>
                <van-button
                  v-if="fileDelete"
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                  @click="
                    () => {
                      if (fileDelete) fileDelete(file)
                    }
                  "
                />
              </template>
            </van-swipe-cell>
          </div>
        </div>
        <el-upload
          v-if="uploadAble"
          :action="fileUploadUrl"
          :on-progress="onProgress"
          :on-error="uploadErr"
          multiple
          :show-file-list="false"
          :data="{ typeId: type.typeId }"
          :headers="myHeaders"
          :on-success="
            (data, file, fileList) => {
              uploadFinish(data, file, fileList)
              uploadPercentage = 0
            }
          "
        >
          <el-button type="default" class="upload-button" icon="el-icon-plus"></el-button>
        </el-upload>
        <el-progress v-if="uploadPercentage" :percentage="uploadPercentage"></el-progress>

        <van-popup v-model="previewVis" closeable position="bottom" style="width: 100%; height: 92%; overflow: hidden">
          <iframe :src="htmlPath" style="height: 100%;width:100%; frameborder=no" frameborder="no" border="0" marginWidth="0" marginHeight="0"></iframe>
        </van-popup>
      </div>
    </template>
  </div>
</template>
<script>
  import { baseURL, fileRoot, fileUploadRoot, fileDownloadRoot, tokenName } from '@/config'
  import download from 'downloadjs'
  import { ImagePreview } from 'vant'

  export default {
    props: ['fileTypes', 'uploadSuccess', 'fileDelete', 'displayTypes', 'uploadAble', 'displayAll'],
    data: function () {
      return {
        fileURL: baseURL + fileRoot,
        fileUploadUrl: baseURL + fileUploadRoot,
        fileDownloadUrl: baseURL + fileDownloadRoot,
        uploadPercentage: 0,
        uploading: false,
        myHeaders: {},
        previewVis: false,
        htmlPath: '',
      }
    },
    methods: {
      uploadErr: function (err) {
        console.log(err)
        alert(JSON.stringify(err))
      },
      onProgress: function (event) {
        this.uploadPercentage = Math.round(event.percent * 100) / 100
      },
      uploadFinish(data, file, fileList) {
        //alert(JSON.stringify(data))
        if (data.success) {
          // alert('上传成功:')
          this.uploadSuccess(data.data)
        } else {
          // alert('上传失败:' + data.errormsg)
        }
      },
      imagePreview(type, file) {
        let images = type.files
          .slice(type.files.findIndex((x) => x.srcPath == file.srcPath))
          .concat(
            type.files.slice(
              0,
              type.files.findIndex((x) => x.srcPath == file.srcPath)
            )
          )
          .map((x) => this.fileURL + x.srcPath)
        ImagePreview(images)
      },
      // filePreview(file) {
      //   var a = document.createElement('a')
      //   a.setAttribute('href', this.fileURL + file.htmlPath)
      //   a.click() // 设置点击事件
      // },
      downloadFile(file) {
        var a = document.createElement('a')
        a.setAttribute('download', file.fileName)
        a.setAttribute('href', this.fileURL + file.srcPath)
        a.click() // 设置点击事件
      },
    },
    created: function () {
      this.myHeaders[tokenName] = this.$store.getters['user/accessToken']
    },
  }
</script>
<style lang="stylus">
  .file-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }

  .upload-button{
    width :46px;
    height :46px;
    background-color :#F3F3F3;
    font-size :16px;
    color:#5F85F6;
    margin-left :16px;
    margin-top :10px;
  }

  .buttonBox{
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
  }
</style>
